
<template>
    <div class="iframe-cont">
        <div class="content">
            <div class="title">{{$route.meta.title}}</div>
            <el-divider></el-divider>
            <div class="f f-a-c">
                <el-input size="small" placeholder="名称、账号、手机号" v-model="keyword" clearable style="width: 220px;" @keyup.enter.native="handleSearch">
                    <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
                </el-input>
                <div class="f-1"></div>
                <el-button style="margin-left: 20px" type="primary" size="small" icon="el-icon-plus" @click="readyAddStaff">新增</el-button>
            </div>

            <!-- 列表 -->
            <el-table class="th-bg" :data="dataList" :row-key="(row)=>{return row.id}"  v-loading="$store.state.tableLoad"  element-loading-text="加载中" element-loading-spinner="el-icon-loading">
                <el-table-column label="序号" prop="name" width="60" fixed>
                    <template slot-scope="scope">
                        <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="姓名" prop="userName"></el-table-column>
                <el-table-column label="手机号码" prop="userPhone"></el-table-column>
                <el-table-column label="账号" prop="userCode"></el-table-column>
                <el-table-column label="创建时间" prop="addTime"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="readyStaffEdit(row)">编辑</el-button>
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                更多<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-if="!row.userCode" @click.native="readyAddAccount(row)">新增账号</el-dropdown-item>
                                <el-dropdown-item v-show="row.userCode && row.loginState===0" @click.native="changeLoginStatus(row)">启用登录</el-dropdown-item>
                                <el-dropdown-item v-show="row.userCode && row.loginState===1" @click.native="changeLoginStatus(row)">禁用登录</el-dropdown-item>
                                <el-dropdown-item @click.native="resetPassword(row)">重置密码</el-dropdown-item>
                                <el-dropdown-item @click.native="delStaff(row)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <!--新增员工-->
            <el-dialog
                :append-to-body="true"
                :title="staffForm.id?'员工信息编辑':'新增员工'"
                :visible.sync="addStaffDialog"
                width="440px"
                center
            >
                <el-form class="f f-d-c" :model="staffForm" ref="staffForm" size="small" label-width="100px">
                    <el-form-item label="姓名" prop="userName">
                        <el-input class="form-item" type="text" v-model="staffForm.userName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="userCode">
                        <el-input class="form-item" type="text" v-model="staffForm.userPhone" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="addStaffDialog=false">取 消</el-button>
                    <span style="display: inline-block;width: 20px;"></span>
                    <el-button type="primary" @click="addStaff">确 定</el-button>
                </div>
            </el-dialog>

            <!--新增新增员工账号-->
            <el-dialog
                :append-to-body="true"
                title="新增员工账号"
                :visible.sync="addAccountDialog"
                width="440px"
                center
            >
                <el-form class="f f-d-c" :model="accountForm" :rules="accountRules" ref="accountForm" size="small" label-width="100px" >
                    <el-form-item label="账号" prop="userCode">
                        <el-input class="form-item" type="text" v-model="accountForm.userCode" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="userPwd">
                        <el-input class="form-item" type="text" v-model="accountForm.userPwd" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="addAccountDialog=false">取 消</el-button>
                    <span style="display: inline-block;width: 20px;"></span>
                    <el-button type="primary" @click="addAccount">确 定</el-button>
                </div>
            </el-dialog>

            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="page"
                :limit.sync="pageSize"
                @pagination="getList"
            />
        </div>
    </div>
</template>

<script>
    import {Message} from "element-ui";

    export default {
        name: "index",
        data(){
            return{
                page: 1,  //页码
                total: 0,  //总量
                pageSize: 10, //页长
                dataList: [],
                keyword: '',
                addStaffDialog: false,
                addAccountDialog: false,
                staffForm: {
                    userName: null,
                    userPhone: null,
                },
                accountForm: {
                    userCode: null,
                    userPwd: null,
                },
                staffRules: {
                    userName: [
                        { required: true, message: '请输入员工姓名', trigger: 'blur' },
                    ],
                    userPhone: [
                        { required: true, message: '请输入员工手机号', trigger: 'blur' },
                    ],
                },
                accountRules: {
                    userCode: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                    ],
                    userPwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                }
            }
        },
        created() {
          this.getList();
        },
        methods:{
            readyAddStaff() {

                this.staffForm = {
                    userName: null,
                    userPhone: null
                }
                this.addStaffDialog = true
            },
            readyStaffEdit(row) {
                this.staffForm = {...row}
                this.addStaffDialog = true
            },
            addStaff() {
                this.$refs.staffForm.validate().then(res => {
                    this.$http({
                        url:'/api/user/submit',
                        data: this.staffForm
                    }).then(res=>{
                        Message.success(this.staffForm.id? '编辑成功':'添加成功')
                        this.addStaffDialog = false
                        this.getList()
                    });
                })
            },
            readyAddAccount(row) {
                this.accountForm.id = row.id
                this.addAccountDialog = true
            },
            addAccount() {
                this.$refs.accountForm.validate().then(res => {
                    this.$http({
                        url: '/api/user/account/submit',
                        data: this.accountForm
                    }).then(res=>{
                        Message.success('添加成功')
                        this.addAccountDialog = false
                        this.getList()
                    });
                })
            },
            delStaff(row) {
                this.$alert(`您确定要删除姓名为 <span style="color: red;"> ${row.userName}</span> 的员工吗？`, '提示', {showCancelButton: true,dangerouslyUseHTMLString: true}).then(() => {
                    this.$http({
                        url:'/api/user/delete',
                        data:{
                            id: row.id
                        }
                    }).then(res=>{
                        Message.success('删除成功！')
                        this.getList()
                    });
                })

            },
            //搜索
            handleSearch(){
                this.page = 1;
                this.getList();
            },
            changeLoginStatus(row) {
                this.$http({
                    url:'/api/user/account/enable',
                    data:{
                        id: row.id,
                        loginState: row.loginState === 1 ? 0:1
                    }
                }).then(res=>{
                    let text =  row.loginState === 1 ? '账号已禁用':'账号已开启'
                    Message.success(text)
                    this.getList()
                });
            },
            resetPassword(row) {
                this.$http({
                    url:'/api/user/account/reset',
                    data:{
                        id: row.id
                    }
                }).then(res=>{
                    Message.success('重置成功！')
                    this.getList()
                });
            },
            //获取数据
            getList(){
                this.$http({
                    url:'/api/user/page',
                    method: 'get',
                    data:{
                        userName: this.keyword,
                        page: this.page,
                        limit: this.pageSize,
                    }
                }).then(res=>{
                    this.dataList = res.data;
                    this.total = res.count;
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .th-bg{
        margin-top: 40px;
    }
    .form-item{
        width: 220px;
    }
</style>
